{% load static from staticfiles %}
<!doctype html>
<html lang="en" class="js">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <title>Protein-protein network visualiser</title>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-7 col-lg-7 blog-main">
                    <div class="blog-post">
                        <h2 id="network"></h2>
                        <!-- <h4><a href="https://torresmateo.com">Mateo Torres</a></h4> -->
                        <div id="graph"></div>
                        <p>Please, click on a drug in the list to visualize its effect on the COVID-19 disease module.</p>
                        <p>The currently selected drug will be highlighted in <span class='active-drug-ref'>yellow</span>. 
                           You selection will be highligthed in <span class='user-selection-ref'>green</span> (unless it's the selected drug).</p>
                        <p>The graph above is interactive, and you can use it to identify the proteins under greater influence. Desktop browsers recommended.</p>
    
                        <!-- <div class="input-group">
                            <select class="custom-select" id="drug-select">
                            </select>
                        </div> -->
                    </div>
                </div>
                <div id="ranking-container" class="col-md-5">
                    <h2>Drug Ranking</h2>
                    <div id="ranking-buttons"></div>
                </div>
            </div>
        </div>
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
        <!-- not boilerplate stuff -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.2/math.min.js"></script>
        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script src="{% static 'js/dragndropupload.js' %}"></script>
        <script src="{% static 'js/papaparse.min.js' %}"></script>
        <script src="{% static 'js/ppi.js' %}"></script>
        <script>

            var load_score = function(){
                var select_elem = document.getElementById('drug-select');
                //console.log(select_elem.value);
                //ppi_chart.load_drug_score(select_elem.value, `static/data/${select_elem.value}.json`);
                console.log(select_elem);

                var url = "{% url 'drug' n_id k_id 12345 %}";
                url = url.replace('12345', select_elem.value);
                ppi_chart.load_drug_score(select_elem.value, url);

                //ppi_chart.update_chart(select_elem.value);
            };

            var load_score_button = function(){
                d3.selectAll('.active-drug')
                    .classed('active-drug', false);
                elem = d3.select(this);
                elem.classed('active-drug', true);
                var url = "{% url 'drug' n_id k_id 12345 %}";
                var ID = elem.attr('value')
                url = url.replace('12345', ID);
                // console.log(ID);
                ppi_chart.load_drug_score(ID, url);
                // console.log(elem);
                // elem.attr('class', 'asd');
            };

            //var files = $('#files')[0].files;
            var scores = JSON.parse('{{scores | escapejs}}');
            var selection_score = d3.sum(scores.map(d => d.score));
            var drugs = null;
            var ppi_chart = null;
            fetch("{% url 'drugs' n_id k_id %}")
            .then(response => response.json())
            .then(data => {
                drugs = data;
                drugs.drugs.push({
                    id: -1,
                    name: "Your Proteins",
                    score: selection_score
                });
                //console.log(drugs);
                sorted_drugs = data.drugs.sort((a,b) => b.score - a.score);
                //console.log(sorted_drugs);
                //var select_elem = d3.select('#drug-select');
                var buttom_elem = d3.select('#ranking-buttons');
                // select_elem.append('option')
                // .attr('value', 'Your Proteins')
                // .text('Your Proteins');
                for(let s = 0; s < sorted_drugs.length; s++){
                    // select_elem.append('option')
                    // .attr('value', sorted_drugs[s].id)
                    // .text(sorted_drugs[s].name);

                    var rank_elem = buttom_elem.append('div')
                    .attr('class', 'ranking-element')
                    .attr('value', sorted_drugs[s].id);
                    
                    rank_elem
                        .classed('active-drug', sorted_drugs[s].id == -1);
                    rank_elem
                        .classed('user-selection', sorted_drugs[s].id == -1);

                    rank_elem.append('div')
                        .attr('class', 'drug-rank')
                        .text(s + 1);
                    rank_elem.append('div')
                        .attr('class', 'drug-score')
                        .text(sorted_drugs[s].score.toFixed(2));
                    rank_elem.append('div')
                        .attr('class', 'drug-name')
                        .text(sorted_drugs[s].name);
                    rank_elem.on('click', load_score_button);
                }
                ppi_chart = new PPI('#graph', graph_file, 'drug-select');
            });
            //var queryVars = new URLSearchParams(window.location.search);
            //alert(queryVars);
            // var net = '{{ net }}';
            // var network = document.getElementById('network');
            // network.innerHTML=net;
            
            var graph_file = JSON.parse('{{network | escapejs}}');
            var interactive_properties = d3.select('#interactive_properties');
            var i = 0;
            var properties = ['betweenness'];

            var placeholder = "Enter comma separated values for proteins and scores...\nP13984, 1\nP09601, 1\nO95613, 2\nO00203, 1";
            //document.getElementById('csv-input').placeholder = placeholder

            var update_radio = function(score_name, scores){

                var props = interactive_properties.selectAll('.properties')
                    .data(properties);

                var property = props.enter()
                    .append('div')
                    .attr('class', 'properties');//.merge(props);
                
                property.append('input').attr('class', 'property');
                property.select('.property')
                    .attr('type', 'radio')
                    .attr('id', d => `${d}`)
                    .attr('name', 'interactive_property')
                    .attr('value', d => `${d}`)
                    .on('click', d => ppi_chart.update_chart(d));
                
                property.append('label').attr('class', 'property-label');
                property.select('.property-label')
                    .attr('for', d=>d)
                    .html(d => d);

                props.exit().remove();
            };

            d3.select('#button').on('click', function(){
                properties.push(`option-${i}`);
                i++;
                //update_radio();
            });

            d3.select('#submit-csv').on('click', function(){
                d3.event.stopPropagation();
                d3.event.preventDefault();
                var form = document.getElementById('text-input');
                var csv_input = document.getElementById('csv-input');
                var title = document.getElementById('score_name_text');
                var score_name = title.value;
                var scores = Papa.parse(csv_input.value);
                var default_score = document.getElementById('default_score_text').value;
                default_score = default_score.length > 0? default_score : 'min';
                if(scores.data.length > 0 && score_name.length > 0){
                    ppi_chart.set_scores(score_name, scores.data, default_score);
                    properties.push(score_name);
                    form.reset();
                    update_radio();
                }
            });

            

            d3.select('#drug-select').on('change', load_score);
            
            //update_radio();

        </script>
    </body>
</html>